<template>
  <!-- 1.获取对应结构 2.渲染相应结构 3.实现相应结构功能，实现能够切换分包页面-->
	<view>
    
    
    <!-- 自定义组件标签名直接使用--><!-- 修改通用性后可以动态绑定背景颜色和圆角尺寸  不添加即默认值 -->
    <!-- 使用外层包裹容器便于渲染置顶效果-->
    <view class="search-box">
      <my-search @click="gotoSearch"></my-search>
    </view>
    
    
		 <!-- 轮播图区域 -->
		    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
		      <!-- 循环轮播图item 项 -->
		      <swiper-item v-for="(item, i) in swiperList" :key="i">
            <!--动态获取url值 后面加上具体地址信息   view改造navigator -->
		       <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
		             <!-- 动态绑定图片src 属性 -->
		             <image :src="item.image_src"></image>
		           </navigator>
		      </swiper-item>
          
		    </swiper>
        
        <!-- 分类导航区域-->   
           <!--分类导航外层包裹容器-->
        <view class="nav-list">
          <!-- 循环分类导航item项-->
           <view class="nav-item" v-for="(item, i) in navList" :key="i" @click="navClickHandler(item)">
             <!-- 动态获取分类导航src位置-->
             <image :src="item.image_src" class="nav-img"></image>
           </view>
        </view>
        
        <!--楼层区-->
        <!-- 楼层区外层包裹容器-->
        <view class="floor-list">
          
          <!-- 楼层区标题部-->     
          <!-- 楼层区循环item项 -->
          <view class="floor-item" v-for="(item, i) in floorList" :key="i">
            <!-- 动态绑定楼层标题src -->
            <image :src="item.floor_title.image_src" class="floor-title"></image>
            
            <!-- 楼层区内容部 -->            
            <!-- 楼层区外部包裹容器-->
            <view class="floor-img-box">
              <!-- 左侧大盒子 -->
              <navigator class="left-img-box" :url="item.product_list[0].url">
                <!-- 只有一个 直接获取索引号0  动态绑定style样式  拼接字符串rpx单位-->
                <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
              </navigator>
              <!-- 右侧小盒子 -->
              <view class="right-img-box">
                <!-- 有多个 循环内容item项   需要忽略索引为0的 添加if判断  动态获取url-->
               <navigator class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0" :url="item2.url">
                  <!-- 动态获取src 动态绑定style样式 -->
                  <image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}"></image>
                  </navigator>
                </view>
              </view>
            </view>
          </view>
          <!-- 楼层区结束签-->
          
</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      // 1. 轮播图数据列表，为空数组
	      swiperList: [],
        // 2. 分类导航数据列表
        navList: [],
        // 3. 楼层区数据列表
        floorList: []
	    };
	  },
	  onLoad() {
	    //在小程序页面刚加载的时候，调用各个功能方法
	    this.getSwiperList()
      this.getNavList()
      this.getFloorList()
	  },
	  methods: {
      
      
      
	    //轮播图数据调用方法
	    async getSwiperList() {
	      //发起请求
	      const {data:res} = await uni.$http.get('/api/public/v1/home/swiperdata')	     
         //判断请求是否成功
         //请求失败 返回封装函数
              if (res.meta.status !== 200) return uni.$showMsg()           
              //请求成功 为 data 中的数据赋值
              this.swiperList = res.message
	            uni.$showMsg('数据请求成功')
	  },
    
    
    
    
    //分类导航调用方法
    async getNavList() {
          const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
          if (res.meta.status !== 200) return uni.$showMsg()
          this.navList = res.message
        },
        //分类导航切换处理函数
        navClickHandler(item) {
          // 判断点击nav具体部分
            if (item.name === '分类') {
              uni.switchTab({
                url: '/pages/cate/cate'
              })
            }
        },
        
        
        
        //首页楼层调用方法
        async getFloorList() {
              const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
              if (res.meta.status !== 200) return uni.$showMsg()
              
              //处理数据   1. 第一次循环首先拿到每个楼层数据  2. 第二次循环拿到每个商品的具体数据
              res.message.forEach(floor => {
                 floor.product_list.forEach(prod => {
                   //prod为商品信息对象  url指向prod具体路径  进行动态拼接
                   prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
                 })
               })
              
              this.floorList = res.message
            },
            gotoSearch() {
              //通过navigateTo实现跳转页面到搜索页面
              uni.navigateTo({
                     url: '/subpkg/search/search'
                   })
                 }
	}
  }
</script>

<style lang="scss">
  //轮播图css样式
swiper {
 height: 330rpx;

 .swiper-item,
 image {
   width: 100%;
   height: 100%;
 }
}
 //分类导航css样式
.nav-list {
  display: flex;
  //四周留空白
  justify-content: space-around;
  margin: 15px 0;

  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}
//楼层区样式
.floor-title {
  height: 60rpx;
  width: 100%;
  //使左右能在同一行显示采用flex布局
  display: flex;
}
.right-img-box {
  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.floor-img-box {
  //使其换行采用flex布局
  display: flex;
  padding-left: 10rpx;
}
.search-box {
  //显示在最外层且粘定位
  position: sticky;
  top: 0;
  z-index: 999;
}
</style>
